﻿/**
 * Created by jinxs on 14-6-25.
 * 依赖
 * ui.core.js
 * ui.button.js
 * ui.buttonbar.js
 * ui.draggable.js
 * ui.resizable.js
 * ui.position.js
 * ui.panel.js
 */
(function ($) {
    /**
     * @class 消息框组件
     * @constructor uiMessagebox
     * @type {{alert: Function, confirm: Function, prompt: Function}}
     */
    $.uiMessagebox = {
        /**
         * @summary 显示提示消息框
         * @name uiMessagebox#alert
         * @function
         * @param options {Object} 组件的配置对象
         * @returns {jQuery} 组件对象
         */
        alert: function (options, param) {
            options = options || {};
            options = $.extend({}, $.uiMessagebox.defaults, options);
            options.title = options.title || '提示';
            options.type = options.type || 'alert';
            _show(options);
        },
        /**
         * @summary 显示确认消息框
         * @name uiMessagebox#confirm
         * @function
         * @param options {Object} 组件的配置对象
         * @returns {jQuery} 组件对象
         */
        confirm: function (options, param) {
            options = options || {};
            options = $.extend({}, $.uiMessagebox.defaults, options);
            options.title = options.title || '确认';
            options.type = 'confirm';
            _show(options);
        },
        /**
         * @summary 显示输入提示消息框
         * @name uiMessagebox#confirm
         * @function
         * @param options {Object} 组件的配置对象
         * @returns {jQuery} 组件对象
         */
        prompt: function (options, param) {
            options = options || {};
            options = $.extend({}, $.uiMessagebox.defaults, options);
            options.title = options.title || '请输入';
            options.type = 'prompt';
            _show(options);
        }
    };
    /**
     * 默认配置
     * @lends uiMessagebox.prototype
     */
    $.uiMessagebox.defaults = {
        /**
         * @type String
         * @default alert
         * @summary 指示消息框的类型
         */
        type: 'alert',
        /**
         * @type String
         * @default ""
         * @summary 指示消息框的标题
         */
        title: '',
        maskID: 'mask',
        /**
         * @type String
         * @default ""
         * @summary 指示消息框的内容
         */
        content: '',
        /**
         * @type Boolean
         * @default true
         * @summary 指示消息框是否有动画效果
         */
        animate: true,
        /**
         * @type Number
         * @default 2000
         * @summary 消息框动画持续的时间
         */
        timeout: 2000,
        /**
         * @type Object
         * @default $(document.body)
         * @summary 指示消息框打开后遮罩的范围
         */
        container: $(document.body),
        /**
         * @type Number
         * @default null
         * @summary 消息框的宽度
         */
        width: null,
        /**
         * @type Number
         * @default null
         * @summary 消息框的高度
         */
        height: null,
        /**
         * @type Boolean
         * @default true
         * @summary 指示消息框是否可拖拽
         */
        draggable: false,
        maximizable: false,
        zIndex: 889,
        /**
         * @event
         * @name uiMessagebox#onClose
         * @type function
         * @default function () { }
         * @summary 指示消息框关闭事件
         */
        onClose: function () {
        }
    };

    var timer;
    var _close = function (options, messageBox, mask, handler, value) {
        timer && clearInterval(timer);
        timer = null;
        handler ? handler(value) : jQuery.noop();
        messageBox.remove();
        $.uiMask.remove({container: options.container, maskID: options.maskID});
    };
    var _show = function (options) {
        var palID = 'msgBox_' + guidGenerator();
        options.maskID = palID + '-' + options.maskID;
        var onClose = options.onClose;
        var mask = $.uiMask.show({container: options.container, zIndex: options.zIndex, maskID: options.maskID});
        var okbtnHtml = $('<button class="ui_messagebox_ok" ui-config="icons:{left:\'icon_submit\'},style: \'button\'">确定</button>');
        var cancelbtnHtml = $('<button class="ui_messagebox_cancel" ui-config="icons:{left:\'icon_cancel\'},style: \'button_cancel\'">取消</button>');
        cancelbtnHtml.uiButton({
            onClick: function () {
                _close(options, messageBox, mask, onClose, false);
            }
        });
        var msgboxWidth = 0;
        var msgboxHeight = 0;
        if ($.fn.uiButton) {
            switch (options.type) {
                case 'confirm':
                    msgboxWidth = options.width || 300;
                    msgboxHeight = options.height || 100;
                    okbtnHtml.uiButton({
                        onClick: function () {
                            _close(options, messageBox, mask, onClose, true);
                        }
                    });
                    break;
                case 'prompt':
                    msgboxWidth = options.width || 250;
                    msgboxHeight = options.height || 120;
                    okbtnHtml.uiButton({
                        onClick: function () {
                            var returnValue = onClose ? onClose($('#' + inputID).val()) : jQuery.noop();
                            if (!returnValue) {
                                messageBox.remove();
                                mask.remove();
                            }
                        }
                    });
                    break;
                default:
                    msgboxWidth = options.width || 250;
                    msgboxHeight = options.height || 100;
                    okbtnHtml.uiButton({
                        onClick: function () {
                            _close(options, messageBox, mask, onClose, true);
                        }
                    });
                    if (options.timeout > 0 && options.type != 'error') { //定时关闭
                        timeout(options.timeout);
                    }
            }
        }
        var input = '';
        var inputID = guidGenerator();
        if (options.type == 'prompt') {
            input = '<br/><input id="' + inputID + '" class="ui_messagebox_prompt_input" type="text"/>';
        }
        var content = '<table width="100%"><tr><td width="32"><div class="ui_messagebox_image ui_messagebox_image_' + options.type + '"></div></td>' +
            '<td><div class="ui_messagebox_content">' + options.content + input + '</div></td></tr></table>';

        var messageBox = $('<div></div>').appendTo(options.container).hide().uiPanel({
            id: palID,
            zIndex: options.zIndex + 1,
            icon: 'messagebox',
            draggable: options.draggable,
            maximizable: options.maximizable,
            maxPadding: [10, 10, 10, 10],
            showBtnBar: true,
            width: msgboxWidth,
            height: msgboxHeight,
            closable: true,
            title: options.title,
            content: content,
            onClose: function () {
                _close(options, messageBox, mask, onClose, false);
            }
        });
        var btnbars = messageBox.uiPanel('buttonbar');
        okbtnHtml.appendTo(btnbars);
        switch (options.type) {
            case 'alert':
                messageBox.addClass('ui_panel_primary');
                break;
            case 'success':
                messageBox.addClass('ui_panel_success');
                okbtnHtml.addClass('button_success');
                break;
            case 'error':
                messageBox.addClass('ui_panel_danger');
                okbtnHtml.addClass('button_cancel');
                okbtnHtml.uiButton('setIcons', {left: 'icon_close'});
                okbtnHtml.uiButton('setLabel', '关闭');
                break;
            case 'question':
                messageBox.addClass('ui_panel_info');
                break;
            case 'warning':
                messageBox.addClass('ui_panel_warning');
                okbtnHtml.addClass('button_warning');
                break;
            case 'confirm':
                messageBox.addClass('ui_panel_primary');
                okbtnHtml.addClass('button_submit');
                cancelbtnHtml.appendTo(btnbars);
                break;
            case 'prompt':
                messageBox.addClass('ui_panel_primary');
                okbtnHtml.addClass('button_submit');
                cancelbtnHtml.appendTo(btnbars);
                break;
            default:
                messageBox.addClass('ui_panel_primary');
                break;
        }
        messageBox.bind("keydown.messagebox", function (event) {
            if (event.which == $.keyCode.ESCAPE) {
                _close(options, messageBox, mask, onClose, false);
            }
        }).fadeIn().uiPosition({
            horizontal: 'center',
            vertical: 'center',
            container: options.container,
            fixed: false
        });
        $(window).bind("resize", function () {
            if (mask.is(':visible')) {
                messageBox.uiPosition({
                    horizontal: 'center',
                    vertical: 'center',
                    container: options.container,
                    fixed: options.fixed
                });
            }
        });

        function timeout(time) {
            timer && clearInterval(timer);
            timer = setInterval(function () {
                if (!options.animate || _IEunder6) {
                    _close(options, messageBox, mask, onClose, false);
                } else {
                    messageBox.fadeOut(function () {
                        _close(options, messageBox, mask, onClose, false);
                    });
                }
                clearInterval(timer);
                timer = null;
            }, time);
        }

        messageBox.bind('mouseover', function () {
            timer && clearInterval(timer);
            timer = null;
        }).bind('mouseout', function () {
            if (options.timeout > 0 && options.type != 'error') { //定时关闭
                timeout(options.timeout);
            }
        });
        okbtnHtml.focus();
    };
})(jQuery);
